<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6 col-lg-4">
                <h2 class="mt-5 mb-3 text-center">修改密码</h2>
                <a class="btn btn-secondary" @click="$router.push($router.go(-1))">返回</a>
                <form id="registerForm" @submit.prevent="update">
                    <div class="form-group">
                        <label for="oldPwd">原密码</label>
                        <input type="password" class="form-control" id="oldPwd" name="oldPwd" v-model="oldPwd"
                            @keydown="checkInputPassword">
                    </div>
                    <div class="form-group">
                        <label for="password">新密码</label>
                        <input type="password" class="form-control" id="password" name="password" v-model="password"
                            @keydown="checkInputPassword">
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" class="form-control" :class="{ 'is-invalid': warnPwdVisible }"
                            id="confirmPassword" name="confirmPassword" v-model="confirmPassword"
                            @keydown="checkInputPassword">
                    </div>
                    <div class="text-center">
                        <button type="submit" id="submitBtn" class="btn btn-primary mt-3 col-lg-6 col-8"
                            :disabled="isEnableLoginBtn">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</template>

<script>
    import inputValidationMixin from '../utils/inputValidationMixin';
    export default {
        name: 'Password',
        mixins: [inputValidationMixin],
        data() {
            return {
                oldPwd: '',
                password: '',
                confirmPassword: '',
                screenTipVisible: true,
                warnPwdVisible: false,
            }
        },
        methods: {
            update() {
                this.$axios.post('/user/update', {
                    "oldPassword": this.oldPwd,
                    "newPassword": this.password,
                })
                    .then(response => {
                        if (response.data.status == 200) {

                            this.$cookies.set('username', this.oldPwd)

                            this.$router.replace('/login')
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            checkConfirmPassword() {
                // console.log(11111);
                if (this.password != this.confirmPassword) {
                    this.warnPwdVisible = true
                } else {
                    this.warnPwdVisible = false
                }
            }
        },
        computed: {
            isEnableLoginBtn() {
                return this.oldPwd.trim() == '' || this.password.trim() == '' || this.confirmPassword.trim() == '' || this.password.length < 6 || this.oldPwd.length < 6 || this.warnPwdVisible
            }
        },
        watch: {
            confirmPassword(val) {
                this.checkConfirmPassword()
            }
        },
    }
</script>

<style scoped></style>